<script setup>
    //导入函数
    import {computed, reactive, ref, toRef, toRefs} from 'vue'

    /**
     * reactive()用法
     */
    // 普通对象不具有响应式
    // const user = {
    //     name:'tom',
    //     age:18
    // }
    // 创造响应式对象，是一个代理对象
    const user = reactive({
        name:'tom',
        age:18
    })
    // console.log(user)

    const changeName = () => {
        user.name = 'jerry'
        // console.log(user.name)
        // console.log(this) // undefined 无法访问this，也不需要访问
    }

    
    /**
     * ref()用法
     */
    // 创建响应式的数据对象
    var count = ref(1); // {value:1}
    // console.log(count)

    const modifyCount = () => {
        count.value = 8
        console.log(count.value)
    }


    /**
     * toRef()用法
     */
    var ageRef = toRef(user, 'age')
    // console.log(ageRef)


    /**
     * toRefs()用法
     */
    const userRef = toRefs(user)
    // // console.log(userRef)
    // const {name, age} = userRef
    const {name, age} = toRefs(user)

    /**
     * computed()用法
     */
    const plusOne = computed(() => count.value + 1)


</script>

<template>  
    <p>{{ user.name }}</p>
    <button @click="changeName">修改user.name</button>
    <hr>

    <p>{{ count }}</p>
    <button @click="modifyCount">修改count</button>
    <hr>

    <p>{{ ageRef }}</p>
    <p>{{ user.age }}</p>
    <button @click="ageRef++">修改ageRef</button>
    <button @click="user.age++">修改user.age</button>
    <hr>

    <p>{{ userRef.name }}</p>
    <p>{{ user.name }}</p>
    <button @click="name='jack'">修改name</button>
    <button @click="user.name='alice'">修改user.name</button>
    <hr>

    <p>{{ plusOne }}</p>
</template>

<style scoped>

</style>